<template>
  <div class="mall m-contain">
    <!-- 顶部-title -->
    <van-nav-bar title="商城" />

    <!-- <van-dropdown-menu :overlay="false"
                       active-color="#E62B4B">
      <van-dropdown-item v-model="value1"
                         :options="option1" />
      <van-dropdown-item v-model="value2"
                         :options="option2" />
      <van-dropdown-item v-model="value2"
                         :options="option3" />
      <van-dropdown-item v-model="value2"
                         :options="option4" />
    </van-dropdown-menu> -->
    <van-tabbar :fixed="false"
                v-model="selectActive"
                active-color="#E62B4B"
                style="height:48px;">
      <van-tabbar-item>
        <van-dropdown-menu :overlay="false"
                           active-color="#E62B4B">
          <van-dropdown-item v-model="value1"
                             :options="option1" />
        </van-dropdown-menu>
      </van-tabbar-item>
      <van-tabbar-item>
        <span class="font-size-15">默认</span>
      </van-tabbar-item>
      <van-tabbar-item>
        <span class="font-size-15"> 销量</span>
        <img :src="require('@/assets/image/select-2.png')"
             width="15"
             style=" vertical-align: middle;margin-top: -4px;"
             alt=""></van-tabbar-item>
      <van-tabbar-item>
        <span class="font-size-15"> 价格</span>
        <img :src="require('@/assets/image/select-1.png')"
             style=" vertical-align: middle;margin-top: -4px;"
             width="15"
             alt=""></van-tabbar-item>
    </van-tabbar>
    <!--  滑动选项卡  -->
    <!--  -->
    <div class="product-show">
      <van-row gutter="15"
               v-for="(ITEM,INDEX) in proData"
               :key="INDEX">
        <van-col span="12"
                 v-for="(item,index) in ITEM"
                 :key="index"
                 class="text-center">
          <div @click="toProductDetail">
            <img :src="item.url"
                 width="100%"
                 alt="">
            <p class="pro-title">{{item.title}}</p>
            <p class="pro-price">
              <img :src="require('@/assets/image/home/icon-coin.png')"
                   width="18"
                   alt="">
              <span>{{item.price}}</span>
            </p>
          </div>
        </van-col>
      </van-row>
    </div>

    <van-tabbar route
                v-model="tabActive"
                active-color="#E62B4B"
                inactive-color="#606266">
      <van-tabbar-item v-for="(item,index) in tabIcon"
                       :key="index"
                       :to="item.path"
                       replace>
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ?item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Swipe, SwipeItem, Cell, CellGroup, Tab, Tabs, Col, Row, Tabbar, TabbarItem, DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Col);
Vue.use(Row);
Vue.use(Tab);
Vue.use(Cell);
Vue.use(Tabs);
Vue.use(Swipe);
Vue.use(NavBar);
Vue.use(SwipeItem);
Vue.use(CellGroup);
Vue.use(Tabbar);
Vue.use(TabbarItem)
export default {
  name: 'Home',
  data() {
    return {
      bannerList: [
        { url: require('@/assets/image/home/banner-1.png'), path: '' },
        { url: require('@/assets/image/home/banner-1.png'), path: '' },
        { url: require('@/assets/image/home/banner-1.png'), path: '' }
      ],
      proData: [
        [{
          url: require('@/assets/image/home/icon-pro-1.png'),
          path: '',
          title: '尚铭电器（SminG） 按摩椅家用 SL导轨智能机械手太空舱全身电动按摩椅SM-828L-1 紫蓝色',
          price: '128'
        }, {
          url: require('@/assets/image/home/icon-pro-2.png'),
          path: '',
          title: '资生堂水之密净澄水活(倍润型)洗护套装(洗发水600ml*2+护发素600ml*2)',
          price: '78'
        }],
        [{
          url: require('@/assets/image/home/icon-pro-1.png'),
          path: '',
          title: '尚铭电器（SminG） 按摩椅家用 SL导轨智能机械手太空舱全身电动按摩椅SM-828L-1 紫蓝色',
          price: '128'
        }, {
          url: require('@/assets/image/home/icon-pro-2.png'),
          path: '',
          title: '资生堂水之密净澄水活(倍润型)洗护套装(洗发水600ml*2+护发素600ml*2)',
          price: '78'
        }]
      ],
      active: '1',
      selectActive: '3',
      tabActive: 1,
      tabIcon: [
        {
          active: require('@/assets/image/home/icon-home-select.png'),
          inactive: require('@/assets/image/home/icon-home.png'),
          title: '首页',
          path: '/index'
        }, {
          inactive: require('@/assets/image/home/icon-mall.png'),
          active: require('@/assets/image/home/icon-mall-select.png'),
          title: '商城',
          path: '/mall'
        }, {
          inactive: require('@/assets/image/home/icon-cart.png'),
          active: require('@/assets/image/home/icon-cart-select.png'),
          title: '购物车',
          path: '/cart'
        }, {
          inactive: require('@/assets/image/home/icon-mine.png'),
          active: require('@/assets/image/home/icon-mine-select.png'),
          title: '我的',
          path: '/mine'
        }
      ],
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认', value: 'a' },
      ],
      option3: [
        { text: '销量', value: 'a' },
      ],
      option4: [
        { text: '价格', value: 'a' },
      ],

    }
  },
  components: {
  },
  methods: {
    toProductDetail() {
      this.$router.push('/productDetail')
    }
  }
}
</script>

<style>
.mall .van-dropdown-menu__bar {
  background-color: #f5f5f5;
}
.mall .van-popup {
  position: relative;
}
.font-size-15 {
  font-size: 15px;
}
.mall .van-dropdown-menu__bar {
  box-shadow: none;
}
</style>

<style lang="less" scoped>
.m-contain {
  padding-bottom: 56px;
}
.van-tabs__nav {
  background-color: #f5f5f5;
}
.product-show {
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 60px;
  .van-row {
    margin-top: 10px;
  }
  .pro-title {
    height: 42px;
    line-height: 21px;
    text-align: left;
    font-size: 15px;
    color: #333333;
    overflow-y: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .pro-price {
    margin-top: 6px;
    text-align: left;
    img {
      vertical-align: -3px;
    }
    span {
      color: #e62b4b;
      font-size: 17px;
      padding-left: 4px;
    }
  }
}
.van-tabbar {
  height: 54px;
  border: 1px solid rgba(230, 230, 230, 1);
  background-color: #f5f5f5;
  .van-tabbar-item__icon img {
    height: 20px;
  }
}
</style>
